<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css">
  <!-- import Vue before Element -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
  <el-row>
    <el-button @click="sendBase">基本使用</el-button>
    <el-button @click="sendGet" type="primary">发送post</el-button>
    <el-button @click="sendPut" type="info">发送 PUT</el-button>
    <el-button @click="sendDel" type="warning">发送 DELETE</el-button>
    <el-button type="danger">危险按钮</el-button>
  </el-row>

  <el-button @click="visible = true">Button</el-button>
  <el-dialog :visible.sync="visible" title="Hello world">
    <p>Try Element</p>
  </el-dialog>
</div>
</body>

<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.25.0/axios.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#app',
    data: function () {
      return {visible: false}
    },
    methods: {
      // 发送基本请求
      sendBase() {
        // 默认配置
        axios.defaults.method = 'GET'
        axios.defaults.baseURL = 'http://localhost:3000'
        axios.defaults.params = {id: 100}
        axios.defaults.timeout = 3000
        axios({
          url: '/posts/1'
        }).then(respose => {
          console.log(respose)
        })
      },

      /**
       * 发送get
       */
      sendGet() {
        axios({
          method: 'post',
          url: 'http://localhost:3000/posts/',
          //设置请求体
          data: {
            title: '今天天气不错呀',
            author: '李斯'
          }
        }).then(respose => {
          console.log(respose)
        })
      },
      /**
       * 发送PUT
       */
      sendPut() {
        axios({
          method: 'put',
          url: 'http://localhost:3000/posts/3',
          //设置请求体
          data: {
            title: '今天天气不错呀',
            author: '赵高'
          }
        }).then(respose => {
          console.log(respose)
        })
      },

      sendDel() {
        axios({
          method: 'delete',
          url: 'http://localhost:3000/posts/3',
        }).then(respose => {
          console.log(respose)
        })
      },
    }
  })
</script>
</html>
